<script setup>
import { chargemoney } from '/src/api/user.js'
import { useUserStore } from '@/stores'
// import { useRouter } from 'vue-router'
import { ref } from 'vue'
// const router = useRouter()
const userStore = useUserStore()
const formRef = ref()
const money = ref()
const charge = async () => {
  const res = await chargemoney(money.value)
  if (res.code == 1) {
    ElMessage.success(res.data)
  } else {
    ElMessage.error(res.data)
  }
  await userStore.getUser()
  // location.reload()
}
</script>
<template>
  <div class="money-container">
    <div class="page-header">
      <h2>账户充值</h2>
      <div class="header-line"></div>
    </div>

    <el-row class="main-content">
      <el-col :span="24">
        <!-- 余额卡片 -->
        <div class="balance-card">
          <div class="balance-info">
            <div class="label">当前余额</div>
            <div class="amount">
              <span class="currency">¥</span>
              <span class="value">{{ userStore.user.balance }}</span>
            </div>
          </div>
          <div class="card-decoration"></div>
        </div>

        <!-- 充值表单 -->
        <div class="charge-form-container">
          <el-form
            :model="money"
            :rules="rules"
            ref="formRef"
            size="large"
            class="charge-form"
          >
            <el-form-item prop="money">
              <el-input
                v-model="money"
                class="money-input"
                placeholder="请输入充值金额"
              >
                <template #prefix>
                  <el-icon><Money /></el-icon>
                </template>
                <template #suffix>元</template>
              </el-input>
            </el-form-item>

            <!-- 快速金额选择 -->
            <div class="quick-amount">
              <div
                v-for="amount in [50, 100, 200, 500]"
                :key="amount"
                class="amount-item"
                :class="{ active: money == amount }"
                @click="money = amount"
              >
                ¥{{ amount }}
              </div>
            </div>

            <el-form-item class="submit-item">
              <el-button type="primary" @click="charge" class="submit-button">
                确认充值
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.money-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;

  .page-header {
    text-align: center;
    margin-bottom: 40px;

    h2 {
      color: #333;
      font-size: 28px;
      margin-bottom: 15px;
    }

    .header-line {
      width: 60px;
      height: 3px;
      background: var(--el-color-primary);
      margin: 0 auto;
      border-radius: 2px;
    }
  }

  .main-content {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 30px;
  }

  .balance-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);

      .card-decoration {
        transform: rotate(45deg) translate(-10%, -10%);
      }
    }

    .balance-info {
      position: relative;
      z-index: 1;
      color: white;

      .label {
        font-size: 16px;
        opacity: 0.9;
        margin-bottom: 10px;
      }

      .amount {
        display: flex;
        align-items: baseline;

        .currency {
          font-size: 24px;
          margin-right: 5px;
        }

        .value {
          font-size: 36px;
          font-weight: 600;
        }
      }
    }

    .card-decoration {
      position: absolute;
      top: -50%;
      right: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 60%
      );
      transition: transform 0.6s ease;
      transform: rotate(45deg) translate(-20%, -20%);
    }
  }

  .charge-form-container {
    max-width: 500px;
    margin: 0 auto;

    .charge-form {
      .money-input {
        .el-input__wrapper {
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
          border-radius: 8px;
          padding: 0 15px;

          &:hover {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
          }
        }

        :deep(.el-input__prefix) {
          margin-right: 10px;
          color: #666;
        }

        :deep(.el-input__suffix) {
          margin-left: 10px;
          color: #666;
        }
      }

      .quick-amount {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 15px;
        margin: 20px 0 30px;

        .amount-item {
          text-align: center;
          padding: 12px;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            border-color: var(--el-color-primary);
            color: var(--el-color-primary);
            transform: translateY(-2px);
          }

          &.active {
            background: var(--el-color-primary);
            color: white;
            border-color: var(--el-color-primary);
          }
        }
      }

      .submit-item {
        text-align: center;
        margin-bottom: 0;

        .submit-button {
          width: 180px;
          height: 45px;
          font-size: 16px;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.4);
          }
        }
      }
    }
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .money-container {
    padding: 15px;

    .main-content {
      padding: 20px;
    }

    .balance-card {
      padding: 20px;
    }

    .charge-form-container {
      .charge-form {
        .quick-amount {
          grid-template-columns: repeat(2, 1fr);
        }

        .submit-button {
          width: 100%;
        }
      }
    }
  }
}
</style>
